<template>
  <div class="title">
    <h3 class="left">{{ left }}</h3>
    <span class="right" @click="handle" style="color: var(--default)">
      <slot name="right" v-if="right">
        <van-icon class-prefix="my-icon" name="refresh" />
      </slot>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    left: {
      type: String,
      default: "热门推荐",
    },
    right: {
      type: Boolean,
      default: "true",
    },
  },
  emits: ["clickRight"],
  name: "Title",
  setup(props, ctx) {
    const left = props.left;
    const right = props.right;
    const handle = () => {
      ctx.emit("clickRight");
    };
    return {
      left,
      handle,
      right,
    };
  },
};
</script>
<style scoped lang="scss">
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
</style>
